<template>
    <!-- ref/children   -->
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    import BScroll from 'better-scroll'

    export default {
        name: 'Scroll',
        props: {
            probeType: {
                type: Number,
                default: 0
            },
            pullUpLoad: {
                type: Boolean,
                default: false
            }
        },
        //  组件创建后再调用
        data() {
            return {
                scroll: null
            }
        },
        created() {
            
        },
        mounted() {
            this.scroll = new BScroll(this.$refs.wrapper, {
                probeType: this.probeType,      //  实时监听滑动位置
                pullUpLoad: this.pullUpLoad,  //  是否上拉刷新
                click: true    //  非表单组件绑定事件是否触发
            });
            this.scroll.on('scroll', (position) => {
                this.$emit('scroll', position);
            });
            this.scroll.on('pullingUp', () => {
                this.$emit('pullingUp')
            });
        },
        methods: {
            scrollTo(x, y, time=500) {
                this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time);
            },
            finishPullUp() {
                this.scroll.finishPullUp();
            },
            refresh() {
                this.scroll && this.scroll.refresh();
            },
            getScrollY() {
                return this.scroll ? this.scroll.y : 0
            }
        }
    }
</script>
<style scoped>

</style>